<template>
  <view class="container">


    <view class="divider-auth-state"
      :style="{ 'background': currentAuthStateTextBg[currentAuthState], 'color': currentAuthStateTextColor[currentAuthState] }">
      <image class="auth-icon" :src="`/static/personalCenter/${currentAuthStateIcon[currentAuthState]}.png`"
        mode="aspectFill"></image>
      <text>{{ currentAuthStateText[currentAuthState] }}</text>
    </view>
    <!-- 认证信息部分 -->
    <view class="auth-info-card">
      <view class="divider-title">实名认证</view>
      <view class="info-item">
        <text class="info-label">真实姓名</text>
        <text class="info-value">{{currentAuthInfoData.real_name}}</text>
      </view>

      <view class="info-item">
        <text class="info-label">身份证号</text>
        <text class="info-value">{{currentAuthInfoData.id_card_number}}</text>
      </view>

      <view class="info-item">
        <text class="info-label">证件有效期</text>
        <text class="info-value">{{currentAuthInfoData.id_card_validity}}</text>
      </view>
    </view>
    <view class="auth-info-card">
      <view class="divider-title">驾驶证</view>
      <view class="info-item">
        <text class="info-label">证件有效期</text>
        <text class="info-value">{{currentAuthInfoData.driver_license_validity}}</text>
      </view>
    </view>

    <view class="auth-info-card" v-for="(item,index) in currentAuthInfoData.cars" :key="index">
      <view class="divider-title">行驶证-{{index+1}}</view>
      <view class="info-item">
        <text class="info-label">行驶证</text>
        <text class="info-value">{{item.car_number}}</text>
      </view>

      <view class="info-item">
        <text class="info-label">品牌型号</text>
        <text class="info-value">{{item.brand_model}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">车座数</text>
        <text class="info-value">{{item.seats}}</text>
      </view>
      <view class="info-item">
        <text class="info-label">运营线路起点</text>
        <text class="info-value" v-if="item.operatingLicenseLineStart">{{item.operatingLicenseLineStart.name || '--'}}</text>
        <text class="info-value" v-else>--</text>
      </view>
      <view class="info-item">
        <text class="info-label">运营线路终点</text>
        <text class="info-value" v-if="item.operatingLicenseLineEnd">{{item.operatingLicenseLineEnd.name || '--'}}</text>
        <text class="info-value" v-else>--</text>
      </view>
      <view class="info-item">
        <text class="info-label">证件有效期</text>
        <text class="info-value">{{item.operating_license_validity}}</text>
      </view>
    </view>
    <view class="auth-sub-info">
      <view>
        更新审核中，审核期间不可更新
      </view>
      <view>
        审核通过后将更新信息;驳回则不更新
      </view>
      <view>
        点击更新记录可查看最近更新信息和审核状态
      </view>
    </view>
    <view class="auth-footer-btn-warps" v-if="currentAuthInfoData && currentAuthState != 0">
      <button class="pre-btn"  @click="navigateTo('/pages/personalCenter/auth/authUpdateRecord')">
        更新记录
      </button>
      <button class="next-btn" @click="navigateTo('/pages/personalCenter/auth/updateAuth')">
        更新认证
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentAuthState: -1,
      currentAuthStateIcon: {
        0: 'authing',
        1: 'pass',
        2: 'refuse',
      },
      currentAuthStateText: {
        0: '审核中',
        1: '审核通过',
        2: '已驳回：行驶证已过期',
      },
      currentAuthStateTextBg: {
        0: '#ECF4FF',
        1: '#E5FAF6',
        2: '#FFF1EB',
      },
      currentAuthStateTextColor: {
        0: '#4E84FF',
        1: '#00CFAB',
        2: '#FF7937',
      }, 
      currentAuthInfoData: {}
    }
  },
  onLoad(options) {
    this.getAuthInfoData();
  },
  methods: {
    // 导航到指定页面
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    async getAuthInfoData() {
      try {
        const data = await this.$http.get("/h5/user/carowner/authInfo");
        this.currentAuthInfoData = data.data
        this.currentAuthState =  data.data.status
        if(data.data.status == 2){
          this.currentAuthStateText[2] = `已驳回：${data.data.reason}`
        }
        
      } catch (error) {}
    },
  }
}
</script>

<style scoped>
.container {}

.divider-auth-state {
  width: calc(100% - 20rpx);
  /* height: 80rpx; */
  background: #ECF4FF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
}

.divider-auth-state .auth-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;

}

.auth-info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 34rpx 0 54rpx 40rpx;
  margin: 20rpx 26rpx 0 26rpx;
}

.auth-info-card:last-child {
  margin-bottom: 20rpx;
}

.divider-title {
  font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
  font-weight: 700;
  font-size: 32rpx;
  color: #0B1F20;
  line-height: 32rpx;
  padding-bottom: 68rpx;
}

.auth-info-card .info-item {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  padding: 16px 0;
}

.auth-info-card .info-label {
  width: 190rpx;
  display: inline-block;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 32rpx;
  color: #0B1F20;
  margin-right: 32rpx;
}

.auth-info-card .info-value {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 32rpx;
  color: #666666;
}

.auth-sub-info {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-size: 24rpx;
  color: #999999;
  line-height: 48rpx;
  margin: 20rpx 64rpx 36rpx 66rpx;
  padding-bottom: 160rpx;
}

.auth-footer-btn-warps {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10rpx 26rpx;
  background-color: #FFFFFF;
  display: flex;
}

.auth-footer-btn-warps .pre-btn {
  width: 340rpx;
  height: 100rpx;
  line-height: 100rpx;
  background: #F5F5F6;
  border-radius: 16rpx;
  font-size: 36rpx;
  color: #4E84FF;
  margin-right: 20rpx;
}

.auth-footer-btn-warps .pre-btn:after {
  border: none;
}

.auth-footer-btn-warps .next-btn {
  width: 340rpx;
  background: linear-gradient(90deg, #ff3f39 0%, #ff7937 100%);
  color: #fff;
  height: 100rpx;
  line-height: 100rpx;
  border-radius: 16rpx;
  font-weight: 500;
  font-size: 36rpx;
}
</style>